﻿<template id="@(ViewBag.GetCompTemplate("import"))">
    <el-dialog v-model="visible" :width="400" :title="title" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false" draggable v-on:close="closed">
        <el-divider class="layout-page-form-top-border"></el-divider>

        <div class="layout-page-import">

            <el-upload action="/other/upload/file"
                       list-type="picture-card"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                       :data="{dir}"
                       :show-file-list="false"
                       :before-upload="beforeUpload"
                       :on-error="onError"
                       :on-success="handleAvatarSuccess">
                <el-icon :size="24"><Plus></Plus></el-icon>
            </el-upload>

            <el-tag v-if="filename" closable type="primary" v-on:close="closed">{{ filetext }}</el-tag>

        </div>

        <template #footer>
            <el-button v-on:click="close">取消</el-button>
            <el-button type="primary" v-on:click="submit">提交</el-button>
        </template>
    </el-dialog>
</template>
<script type="text/javascript">
    var @(ViewBag.GetCompName("import")) = {
        template: "#@(ViewBag.GetCompTemplate("import"))", data() {
            return {
                path: "@(ViewBag.PagePath)",
                visible: false,
                title: "导入数据",
                dir: "temp",
                loading: null,
                filetext: null,
                filename: null
            }
        },
        methods: {
            open(){
                this.visible = true;
            },
            close(){
                this.visible = false;
            },
            closed(){
                this.loading = null;
                this.filetext = null;
                this.filename = null;
            },
            submit(){
                var that = this;
                if (that.filename) {
                    app.func.submit(`${that.path}/import`, { file: that.filename }, result => {
                        that.close(); that.$emit("refresh");
                    });
                }
                else { app.func.warning("请先上传导入文件"); }
            },
            handleAvatarSuccess(result, file){
                var that = this;
                if (result.success) {
                    that.filetext = result.data.text;
                    that.filename = result.data.file;
                }
                else { app.func.warning(result.message); }
                that.loading.close();
            },
            beforeUpload(){
                this.loading = app.func.loading(".el-dialog");
            },
            onError(error){
                this.loading.close();
                app.func.error("上传错误，请查看日志");
                console.info(error);
            }
        },
        mounted() { }
    };
</script>